<template>
  <Navbar title="团购详情">
    <span class="nav-btn" @click="showDropdown">
      <img
        src="https://p0.meituan.net/travelcube/7289ad16274ae18417b84c916bb6a711169.png"
        class="icn_menu"
      />
    </span>
    <div id="nav-dropdown" class="nav-dropdown active" v-show="navDropdownShow">
      <router-link to="/home">
        <div class="">
          <img
            src="https://p1.meituan.net/travelcube/142ba119b889881105236ef57446e6bf866.png"
            class="icn_drop_home"
          />
          首页
        </div>
      </router-link>
      <router-link to="/mine">
        <div>
          <img
            src="https://p0.meituan.net/travelcube/641521461179df7cfb88738dd1ea11ec1031.png"
            class="icn_drop_mine"
          />我的
        </div>
      </router-link>
      <router-link to="/search">
        <div>
          <img
            src="https://p0.meituan.net/travelcube/4b45dc09c35f9175498345f8672d08991022.png"
            class="icn_drop_search"
          />搜索
        </div>
      </router-link>
    </div>
  </Navbar>
</template>

<script setup>
import {ref} from 'vue'
import { useRouter } from "vue-router";
import Navbar from "@/components/Navbar.vue";

const router = useRouter();
const navDropdownShow=ref(false)
const showDropdown=()=>{
    navDropdownShow.value=!navDropdownShow.value
}
</script>

<style lang="less" scoped>
.nav-btn {
  display: inline-block;
  font-size: 0.2rem;
  line-height: 1;
  vertical-align: middle;
  .icn_menu {
    width: 0.48rem;
    height: 0.48rem;
  }
}
.nav-dropdown {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 2.5rem;
  width: 2rem;
  position: absolute;
  right: 0.04rem;
  top: 1rem;
  opacity: 1;

  background: #ffffff;
  color: #222222;
  box-shadow: 0 0.12rem 0.6rem 0 rgb(196 196 196 / 60%);
  border-radius: 0.1rem;
  overflow: visible;
  z-index: 100;
  img {
    width: 0.48rem;
    height: 0.48rem;
  }
}
</style>